<style scoped>
	.add {
		color: #3a3ef4;
		margin-left: 10px;
	}

	.delete {
		color: brown;
		margin-left: 10px;
	}
</style>
<template>
	<div>
		<div class="commonWidth">
			<el-row style="margin-bottom: 10px">
				<el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
			</el-row>
			<div class="selectTable">
				<el-table tooltip-effect="dark" :data="tableData" v-loading.body="listLoading" ref="dataSelectTable" border
					style="width: 100%">
					<el-table-column label="事务" prop="typeStr">
					</el-table-column>
					<el-table-column label="模板流程" prop="itemListStr">
					</el-table-column>
					<el-table-column label="创建人" prop="userName">
					</el-table-column>
					<el-table-column label="创建时间" prop="createTimeStr">
					</el-table-column>
					<el-table-column label="操作" prop="contacts" width="100" align="center">
						<template scope="scope">
							<el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
							<el-button type="text" size="small" @click="del(scope.row)" style="color: brown;">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		
		
		<el-dialog :visible.sync="visible" :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="formRules" label-width="120px" style="width: 100%;">
				<el-form-item label="类别" prop="mainType">
					<el-select v-model="form.mainType" placeholder="请选择危险废物类别" @change="getDocumentScheduleContentCodeList">
						<el-option v-for="item in dataList1" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="子类" prop="type" v-if="form.mainType">
					<el-select v-model="form.type" placeholder="请选择子类">
						<el-option v-for="item in dataList2" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="审批节点" prop="remark" v-if="form.type != 'SAMPLE'">
					<div v-for="(item, index) in form.itemIdList">
						<div class="down" v-if="index > 0">↓</div>
						<div>
							<el-select v-model="item.userId" placeholder="请选择审批人" @change="$forceUpdate()">
								<el-option :label="item.chineseName" :value="item.userId"
									v-for="(item,index) in managerList" :key="index"></el-option>
							</el-select>
							<span @click="delItem(index)" class="delete" v-if="form.itemIdList.length  > 1">删除</span>
							<span @click="addItem" v-if="form.itemIdList.length == index + 1" class="add">添加</span>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="抄送人" prop="remark" v-if="form.type != 'SAMPLE'">
					<el-select v-model="copyList" placeholder="请选择抄送人（可多选）" multiple collapse-tags>
						<el-option :label="item.chineseName" :value="item.userId" v-for="(item,index) in managerList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="超时提醒次数" prop="remark" v-if="form.type != 'SAMPLE'">
					<el-select v-model="form.period" placeholder="请选择超时提醒次数">
						<el-option :label="item.value" :value="item.code" v-for="(item,index) in periodList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="text-align: center;margin-left: -90px!important;">
					<el-button type="primary" @click="saveOrUpdate">保存</el-button>
					<el-button @click="visible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				dataList1: [],
				dataList2: [],
				tableData: [],
				listLoading: true,
				visible: false,
				form: {
					mainType: '', // 大类（废气、废水）
					type: '', // 子类
					itemIdList: [{}],
					period: '',
					commonPeriod: '',
					urgentPeriod: '',
					remindPeriod: ''
				},
				formRules: {
					mainType: [{
						required: true,
						message: '请选择目标事务',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择目标事务',
						trigger: 'blur'
					}]
				},

				managerList: [],
				copyList: [],
				periodList: [{
						code: 0,
						value: '仅提醒一次'
					},
					{
						code: 2,
						value: '每隔2小时'
					},
					{
						code: 4,
						value: '每隔4小时'
					},
					{
						code: 6,
						value: '每隔6小时'
					},
					{
						code: 8,
						value: '每隔8小时'
					},
					{
						code: 24,
						value: '每隔24小时'
					}
				]
			}
		},
		created: function() {
			that = this

			that.ajax({
				url: '/documentEntSchedule/getDocumentScheduleTypeList',
				contentType: 'application/x-www-form-urlencoded',
				data: {},
				success: function(result) {
					that.dataList1 = result.data
				}
			})

			this.getManagerList();
			this.getList();
		},
		methods: {

			getDocumentScheduleContentCodeList() {
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/documentEntSchedule/getDocumentScheduleContentCodeList',
						contentType: 'application/x-www-form-urlencoded',
						data: {
							code: that.form.mainType
						},
						success: function(result) {
							that.dataList2 = result.data
							resolve(result.data)
						}
					})
				})
			},

			addItem: function() {
				var _this = this;
				_this.form.itemIdList.push({});
				this.$forceUpdate()
			},
			delItem: function(index) {
				var _this = this;
				_this.form.itemIdList.splice(index, 1);
				this.$forceUpdate()
			},
			getManagerList: function() {
				var _this = this;
				that.ajax({
					url: '/entOrders/listInquiryPerson',
					dataType: 'json',
					success: function(data) {
						_this.managerList = data.data;
					}
				});
			},
			saveOrUpdateApprovalTemplate: function() {
				var _this = this;
				var copyList = [];
				let itemIdList = [];
				that.copyList.forEach(function(t) {
					copyList.push(t)
				})
				_this.form.itemIdList.forEach(function(t) {
					itemIdList.push(t.userId)
				})
				_this.form.copyIdList = copyList;
				_this.form.itemIdList = itemIdList;
				that.ajax({
					url: '/approvalTemplate/saveOrUpdateApprovalTemplate',
					contentType: 'application/json',
					data: JSON.stringify(_this.form),
					success: function(result) {
						if (result.status == 1 && result.data) {
							if (_this.form.id) {
								that.$message.success('修改成功');
							} else {
								that.$message.success('保存成功');
							}
							_this.visible = false;
							_this.getList();
						} else {
							that.$message.error('保存信息失败');
						}
					}
				});
			},

			saveOrUpdate: function() {
				var _this = this;
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						_this.saveOrUpdateApprovalTemplate();
					}
				});
			},
			getList: function() {
				var _this = this;
				_this.listLoading = true;
				var param = {}
				that.ajax({
					url: 'approvalTemplate/pageApprovalTemplateList?ticketId=' + this.$store.state.token +
						'&pageIndex=1&pageSize=999',
					dataType: 'json',
					data: param,
					success: function(result) {
						_this.listLoading = false;
						var tableData = [];
						if (result.status == 1 && result.data.records && result.data.records.length > 0) {
							var tableData = result.data.records;
							tableData.forEach(function(t) {
								var itemListStr = '';
								t.itemList.forEach(function(e) {
									itemListStr = itemListStr + e.userName + "→"
								})
								t.itemListStr = itemListStr.substring(0, itemListStr.length - 1);
							});
						}
						_this.tableData = tableData;
						//_this.getSamplePeriodList(tableData);
					}
				})
			},
			search: function() {
				this.getList();
			},

			add: function() {
				var _this = this;
				_this.form = {
					type: '',
					itemIdList: [{}],
					period: '',
					commonPeriod: '',
					urgentPeriod: '',
					remindPeriod: ''
				}
				_this.copyList = [];

				_this.visible = true;
			},
			edit: async function(item) {
				var _this = this;
				let thisItem = JSON.parse(JSON.stringify(item))

				var copyList = [];
				if (thisItem.copyList) {
					thisItem.copyList.forEach(function(t) {
						copyList.push(t.userId);
					})
				}
				_this.copyList = copyList;

				_this.form = thisItem;
				_this.form.itemIdList = thisItem.itemList
				await that.getDocumentScheduleContentCodeList()
				_this.$forceUpdate()
				_this.visible = true;
			},

			deleteApprovalTemplate: function(item) {
				var _this = this;
				that.ajax({
					url: '/approvalTemplate/deleteApprovalTemplate',
					data: {
						id: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.status == 1 && result.data) {
							that.$message.success('删除成功');
							_this.getList();
						} else {
							that.$message.error('删除失败');
						}
					}
				})
			},

			del: function(item) {
				var _this = this;
				_this.$confirm('此操作将删除该模板, 是否确定?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					_this.deleteApprovalTemplate(item);
				}).catch(function() {});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>